<template>
  <div @click="visible = !disabled">
    <slot>
      <a-input
        v-model="inputValue"
        placeholder="请选择工序"
        :disabled="disabled"
      />
    </slot>
  </div>
  <a-modal title="选择工序" v-model:visible="visible" :width="800">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
        <a-button type="primary" @click="handlok">确认</a-button>
      </a-space>
    </template>

    <div>
      <a-space>
        <a-input-search
          search-button
          v-model="searchForm.keyWord"
          :style="{ width: '220px' }"
          placeholder="工序编码"
          @change="Search"
          @search="Search"
        />
        <a-select
          v-model="searchForm.processType"
          placeholder="工序类别"
          :style="{ width: '220px' }"
          @change="Search"
        >
          <a-option :value="''"> 全部 </a-option>
          <a-option value="机加"> 机加 </a-option>
          <a-option value="制管"> 制管 </a-option>
          <a-option value="组装"> 组装 </a-option>
        </a-select>
        <a-select
          v-model="searchForm.operateType"
          placeholder="工作方式"
          :style="{ width: '220px' }"
          @change="Search"
        >
          <a-option :value="''"> 全部 </a-option>
          <a-option value="生产"> 生产 </a-option>
          <a-option value="检验"> 检验 </a-option>
          <a-option value="维修"> 维修 </a-option>
        </a-select>
      </a-space>
    </div>
    <div style="height: 20px" />
    <tableTurn
      :args="{
        rowSelection: {
          type: choiceType,
          showCheckedAll: true,
        },
      }"
      :tableData="getDemandAll"
      ref="tableRef"
    >
      <a-table-column
        title="工序编号"
        data-index="processCode"
        align="center"
      />
      <a-table-column
        title="工序名称"
        data-index="processName"
        align="center"
      />
      <a-table-column
        title="工序类别"
        data-index="processType"
        align="center"
      />
      <a-table-column
        title="生产方法"
        data-index="productionMethod"
        align="center"
      />
      <a-table-column :width="100" title="状态" align="center">
        <template #cell="{ record }">
          <a-typography-text type="success" v-if="record.state === 1">
            启用
          </a-typography-text>
          <a-typography-text type="danger" v-if="record.state === 2">
            停用
          </a-typography-text>
        </template>
      </a-table-column>
    </tableTurn>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, useSlots, reactive, watch } from 'vue';
  import { TWorkSerialGroup } from '@/api/FactoryModeling/type';
  import { Message } from '@arco-design/web-vue';
  import { GetWorkSerialGroupPage } from '@/api/FactoryModeling';

  let searchForm = reactive<any>({
    type: 1,
  });

  const tableRef = ref();
  const getDemandAll = async (page: any) => {
    try {
      let res = await GetWorkSerialGroupPage({
        ...page,
        ...searchForm,
        state: 1,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let slots = useSlots();
  const props = withDefaults(
    //参数说明
    defineProps<{
      workSerialList?: TWorkSerialGroup[]; //tab显示的tab列表
      inputValue?: string;
      choiceType?: 'radio' | 'checkbox';
      disabled?: boolean;
    }>(),
    {
      workSerialList: () => [],
      choiceType: 'radio',
      disabled: false,
    }
  );

  let visible = ref(false);

  const Search = () => {
    tableRef.value.loadData();
  };
  let emit = defineEmits(['choice']);

  let handlok = async () => {
    if (!tableRef.value.selectedList.length) return Message.error('请选择数据');
    visible.value = false;
    emit('choice', tableRef.value.selectedList);
  };
  defineExpose({ visible });
  watch(visible, (value) => {
    if (value) return;
    tableRef.value.selectedList = [];
    tableRef.value.selectedKeys = [];
  });
</script>

<style scoped></style>
